import React, { Component } from 'react';
import { List, Button, WingBlank, Toast } from 'antd-mobile';
import { createForm } from 'rc-form';
import axios from 'axios';
import SelectDate from './SelectDate';
import store from '@/store';

class Personal extends Component {
	constructor (props) {
		super (props)
		this.state = {
			username: localStorage.getItem("username")
		}
	}
	goback () {
		this.props.history.push('/user');
	}
	goava () {
		this.props.history.push('/avatar')
	}
	sub () {
		let birthday = document.querySelectorAll('.am-list-extra')[3].innerText
		let username = this.state.username
		console.log(birthday,'哈哈哈哈',username)
		axios.post('/users/setbirthday',{username:username,birthday:birthday})
			.then((data)=> {
				console.log(data)
				this.showToast('生日修改成功！');
				this.props.history.push('/User')
			})
	}
	showToast(tex) {
		Toast.info(tex);
	}
	componentDidMount () {
		let username = this.state.username
		axios.post('/users/personal',{username:username})
			.then((data) => {
				// console.log(data.data)
				let per = data.data
				store.dispatch({
					type: 'CHANGE_BIRTHDAY',
					data: per[0].birthday
				})
				store.dispatch({
					type: 'CHANGE_AVATAR',
					data: per[0].avatar
				})
// 				this.setState ({
// 					avatar: per[0].avatar,
// 					birthday: per[0].birthday
// 				})
				// console.log(this.state.birthday)
			})
	}
	render() {
		const Item = List.Item;
		return (
			<div className="container">
				<div className="box set-box">
					<div className="header set-header">
						<i className="iconfont icon-left-copy" onClick={this.goback.bind(this)}> 个人资料</i>
					</div>
					<div className="set-content content">
						<List className="my-list">
							<Item extra={this.state.username} onClick={() => {}}>用户名</Item>
						</List>
						<List className="my-list">
							<Item extra={store.getState().personal.avatar} arrow="horizontal" onClick={this.goava.bind(this)}>昵称</Item>
						</List>
						<List className="my-list">
							<Item extra={store.getState().personal.birthday} arrow="horizontal" onClick={() => {}}>生日</Item>
						</List>
						<List className="my-list">
							<SelectDate bir={store.getState().personal.birthday} />
						</List>
						<List className="my-list">
							<Item extra="普通会员" onClick={() => {}}>身份</Item>
						</List>
						<WingBlank>
							<Button className="relog" onClick={this.sub.bind(this)}
							ref={(Button) => { this.Button = Button; }}
							type="warning">确认</Button>
						</WingBlank>
					</div>
				</div>
			</div>
		)
	}
}
		
const PersonalWrapper = createForm()(Personal);		
export default PersonalWrapper;
